<template>
  <div>
    <section class="logo">
      <img src="../../images/logo.svg">
    </section>
    <section class="input_group">
        <input type="text" placeholder="手机或邮箱" v-model="loginName"/>
        <input type="password" placeholder="密码" v-model="password"/>
        <button @click="goLogin">登录</button>
    </section>
    <section class="other">
      <p>社交账号登入</p>
      <div>
        <img src="../../images/qq.svg"/>
        <img src="../../images/wechat.svg"/>
        <img src="../../images/sina.svg"/>
      </div>
    </section>
      <span class="b_left">忘记密码？</span>
      <span class="b_right">注册</span>
    <loading v-if="showLoading"></loading>
    <section class="shop_back_svg_container" v-if="showLoading">
      <img src="../../images/fff.png">
    </section>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import {login} from '../../service/getData'
  import {getCookie, setCookie, clearCookie} from '../../config/mUtils'
  import loading from '../../components/common/loading'
  import {mapState} from 'vuex'

  export default {
    data(){
      return{
        name:'login',
        loginName:'',
        password:'',
        showLoading:false
      }
    },

    mounted(){
    },
    watch:{

    }
    ,
    components:{
      loading
    },

    computed:{
      ...mapState([
        'role_name'
      ]),
    },

    methods:{
      async goLogin(){
        let _this = this;
        if(_this.loginName.length > 0 && _this.password.length > 0 ){
          _this.showLoading = true;
          let res = await login(_this.loginName , _this.password);
          if(res.success){
            setCookie('email' , res.email);
            if(res.role_name && (res.role_name === '安装商' || res.role_name === '终端用户')){
              this.$store.state.role_name = res.role_name;
              this.$router.push({path:'/ucenter/list'});
            }
          }else{
            _this.showLoading = false;
            Toast({
              message: res.message,
              position: 'bottom',
              duration: 3000
            });
          }
        }
      }
    }
  }

</script>

<style lang="less" scoped>
  .logo{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    padding-top: .6rem;
    img{
      max-width: 5rem;
      height: auto;
    }
  }
  .input_group{
    margin-top: 2rem;
    padding: 0 .8rem;
    input{
      background-color: #E9EAEC;
      color: #616369;
      width: 100%;
      min-height: 2rem;
      padding: .3rem .6rem;
      font-size: .75rem;
      border-radius: .1rem;
    }
    button{
      width: 100%;
      background-color: #F15A24;
      color: #fff;
      height: 2rem;
      letter-spacing: .3rem;
      font-size: .8rem;
      margin-top: .65rem;
      border-radius: .1rem;
      box-shadow: 0 1px 1px #8c8c8c;
    }
    button:active{
      background-color: #D75524;
    }
    input:nth-child(2){
      margin-top: .2rem;
      letter-spacing: .1rem;
    }
  }
  .other{
    margin-top: 1rem;
    p{
      color: #373737;
      text-align: center;
      font-size: .65rem;
    }
    div{
      margin-top: 1rem;
      display: flex;
      justify-content: space-around;
      padding: 0 2rem;
      img{
        max-width: 3rem;
      }
    }
  }
  .bottom{
    position: absolute;
    bottom: .1rem;
    padding: 0 1rem;
    font-size: .75rem;
  }
  .b_left{
    position: absolute;
    bottom: .3rem;
    left: 1rem;
    font-size: .65rem;
  }
  .b_right{
    position: absolute;
    bottom: .3rem;
    right: 1rem;
    font-size: .65rem;
  }
  .shop_back_svg_container{
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    background-color: #fff;
    z-index: 9;
    img{
      width: 100%;
      opacity: .8;
    }
  }
</style>
